import {
	createRouter,
	createWebHistory,
	RouterView,
} from 'vue-router'
import {
	h,
	resolveComponent,
} from 'vue'
import store from '@/store'
import Mid from '@/views/Mid.vue'
import NProgress from 'nprogress'

// Vue2.X的base选项被移除，根路径在此处配置
const routerHistory = createWebHistory('/v3-plus')

const routes = [{
	path: '/',
	name: 'Layout',
	component: () => import('@/layout/index.vue'),
	children: [{
		path: '/',
		name: 'Home',
		meta: {
			title: '首页',
			icon: '&#xe801;',
			useCache: false
		},
		component: () => import('@/views/Home.vue')

	}, {
		path: '/Profile',
		name: 'Profile',
		meta: {
			title: '个人主页',
			icon: '&#xe7ce;',
			useCache: true
		},
		component: () => import('@/views/Profile.vue')

	}, {
		path: '/Test',
		name: 'Test',
		meta: {
			title: '测试页面',
			icon: '&#xe81d;',
			useCache: true
		},
		component: {
			name: 'Test',
			render: () => h(Mid)
		},
		children: [{
			path: '/TestTemp',
			name: 'TestTemp',
			meta: {
				title: '测试vue3特性',
				useCache: true
			},
			component: () => import('@/views/Test/TestTemp.vue')

		}]

	}, {
		path: '/Tool',
		name: 'Tool',
		meta: {
			title: '我的工具',
			icon: '&#xe7a3;',
			useCache: true
		},
		component: {
			name: 'Tool',
			render: () => h(Mid)
		},
		children: [{
			path: '/IconTool',
			name: 'IconTool',
			meta: {
				title: '图标工具',
				useCache: true
			},
			component: () => import('@/views/Tool/IconTool.vue')

		}, {
			path: '/ReqTool',
			name: 'ReqTool',
			meta: {
				title: '请求工具',
				useCache: true
			},
			component: () => import('@/views/Tool/ReqTool.vue')

		}, {
			path: '/ColorRelator',
			name: 'ColorRelator',
			meta: {
				title: '颜色生成器',
				useCache: false
			},
			component: () => import('@/views/Tool/ColorRelator.vue')

		}, {
			path: '/ImgTool',
			name: 'ImgTool',
			meta: {
				title: '图片工具',
				useCache: false
			},
			component: () => import('@/views/Tool/ImgTool.vue')

		}, {
			path: '/DecodeTool',
			name: 'DecodeTool',
			meta: {
				title: '编码解码工具',
				useCache: false
			},
			component: () => import('@/views/Tool/DecodeTool.vue')

		}, {
			path: '/DateTool',
			name: 'DateTool',
			meta: {
				title: '日期时间工具',
				useCache: false
			},
			component: () => import('@/views/Tool/DateTool.vue')

		}]
	}]
}, {
	path: '/Login',
	name: 'Login',
	meta: {
		title: '登录',
	},
	component: () => import('@/views/Login.vue')

}, {
	path: '/Error',
	name: 'Error',
	meta: {
		title: '404',
	},
	component: () => import('@/views/Error.vue')
}, {
	path: '/:pathMatch(.*)',
	redirect: '/Error',
}]
const router = createRouter({
	history: routerHistory,
	routes
})
router.beforeEach((to, from, next) => {
	NProgress.start()
	let tabs = store.state.tabs || []
	let user = store.state.user || {}
	if (localStorage.getItem('user') && (!user || !user.id)) {
		user = JSON.parse(localStorage.getItem('user'))
		store.commit('user/setUser', user)
	}
	// 不是跳转登录界面 并且 没有登录的
	if (to.path !== '/Login' && !user.id) {
		return next('/Login')
	}
	// 404页面以外才加入标签
	if (to.path !== '/Error') {
		const temp = tabs.find(item => item.fullPath === to.fullPath)
		if (!temp) {
			tabs.push(to)
		}
	}

	store.commit('setTabs', tabs)
	next()
})
router.afterEach(transition => {
	NProgress.done();
});
export default router
